<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no,
    initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>携程旅行-酒店预订</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper.min.css">
</head>

<body>
    <header>
        <div class="search">
            <div class="search_icon"></div>
            <p class="text">搜索:目的地/景点/酒店/航班号</p>
        </div>
        <div class="mine"><span>我 的</span>
        </div>
    </header>
    <div class="focus">
        <!-- Swiper -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="images/banner.dpg" alt=""></div>
                <div class="swiper-slide"><img src="images/banner1.dpg" alt=""></div>
                <div class="swiper-slide"><img src="images/banner2.dpg" alt=""></div>
                <div class="swiper-slide"><img src="images/banner3.dpg" alt=""></div>
            </div>
        </div>
    </div>

    <nav class="local_nav">
        <a href="#">
            <div class="local_img" title="攻略·景点"></div>
            <span>攻略·景点</span>
        </a>
        <a href="#">
            <div class="local_img" title="门票·玩乐"></div>
            <span>门票·玩乐</span>
        </a>
        <a href="#">
            <div class="local_img" title="美食林"></div>
            <span>美食林</span>
        </a>
        <a href="#">
            <div class="local_img" title="周边游"></div>
            <span>周边游</span>
        </a>
        <a href="#">
            <div class="local_img" title="一日游"></div>
            <span>一日游</span>
        </a>
    </nav>
    <div class="grid_nav">
        <div class="grid_nav_hotal">
            <a class="hotal">酒店</a>
            <a class="homestay">民宿·客栈</a>
            <a class="sale_hotal">特价·爆款</a>
        </div>
        <div class="grid_nav_flight">
            <a class="air_ticket">机票</a>
            <a class="train_ticket">火车票</a>
            <a class="bus_ship_ticket">汽车·船票</a>
            <a class="taxi">专车·租车</a>
        </div>
        <div class="grid_nav_travel">
            <a class="travel">旅游</a>
            <a class="train_travle">高铁游</a>
            <a class="ship_travel">游轮游</a>
            <a class="custom_travel">定制游</a>
        </div>
    </div>

    <div class="subnav_entry">
        <a href="#">
            <div class="bgimg"></div><span>自由行</span>
        </a>
        <a href="#">
            <div class="bgimg"></div><span>WiFi电话卡</span>
        </a>
        <a href="#">
            <div class="bgimg"></div><span>保险·签证</span>
        </a>
        <a href="#">
            <div class="bgimg"></div><span>换钞·购物</span>
        </a>
        <a href="#">
            <div class="bgimg"></div><span>向导·包车</span>
        </a>
        <a href="#">
            <div class="bgimg"></div><span>特价机票</span>
        </a>
        <a href="#">
            <div class="bgimg"></div><span>礼品卡</span>
        </a>
        <a href="#">
            <div class="bgimg"></div><span>申卡·借钱</span>
        </a>
        <a href="#">
            <div class="bgimg"></div><span>旅拍</span>
        </a>
        <a href="#">
            <div class="bgimg"></div><span>更多</span>
        </a>
    </div>

    <div class="scale">
        <div class="scale_hd">
            <h2 class="huodong">热门活动</h2>
            <span>获取更多福利</span>
        </div>
        <div class="scale_bd">
            <div class="left_mod"></div>
            <div class="right_mod"></div>
        </div>
    </div>

    <!-- 功能模块 -->
    <div class="fun">
        <div class="tel">
            <div class="icon"></div>
            <span>电话预定</span>
        </div>
        <div class="download">
            <div class="icon"></div>
            <span>下载客户端</span>
        </div>
        <div class="myself">
            <div class="icon"></div>
            <span>我 的</span>
        </div>
    </div>

    <!-- 版本模块 copyright -->
    <div class="copyright">
        <div class="message">
            <a href="#">网站地图</a> <span>|</span>
            <a href="#">Langurage</a><span>|</span>
            <a href="#">电脑版</a>
        </div>
        <div class="copyright_mode">
            <a href="#">©2020携程旅行</a><span>|</span>
            <a href="#">沪ICP备08023580号</a>
        </div>
    </div>

    <script src="js/swiper.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper('.swiper-container');
        var mySwiper = new Swiper('.swiper-container', {
            // autoplay: true,
            loop: true, //等同于以下设置
            autoplay: {
                delay: 2000,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            },
        });
    </script>

</body>

</html>